<template>
	<view
		class="slide-btn"
		v-show="show">
		<view class="btn-left">
			<image
				@click="changeShow('explainShow')"
				src="/static/images/chicken/left_1.png"
				mode="widthFix"></image>
		</view>
		<view class="btn-right">
			<image
				@click="changeShow('messageShow')"
				src="/static/images/chicken/right_1.png"
				mode="widthFix"></image>
			<image
				@click="changeShow('farmSkinShow')"
				src="/static/images/chicken/right_2.png"
				mode="widthFix"></image>
			<image
				@click="changeShow('propShow')"
				src="/static/images/chicken/right_3.png"
				mode="widthFix"></image>
			<image
				@click="changeShow('dressShow')"
				src="/static/images/chicken/right_4.png"
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {}
		},
		methods: {
			changeShow(val) {
				this.$emit('changeShow', val);
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 两侧按钮
	.slide-btn {
		image {
			width: 112rpx;
			margin-bottom: 25rpx;
		}
		.btn-left {
			position: absolute;
			left: 16rpx;
			top: 270rpx;
		}
		.btn-right {
			position: absolute;
			right: 16rpx;
			top: 120rpx;
			display: flex;
			flex-direction: column;
		}
	}
</style>